<template>
    <div class="app-container mine">
        <div class="header">
            <img src="@/assets/mineBg.png" alt="" class="bg">
            <div class="header-content">
                <div></div>
                <div class="myInfo">
                    <div class="left">
                        <img src="@/assets/logo.png" class="logo" alt="">
                    </div>
                    <div class="right">
                        <div class="name">
                            {{ agentName }}
                        </div>
                        <div class="agentNo">
                            {{agentNo}}
                        </div>
                    </div>
                </div>
                <div class="wallet" style="margin-top: 5px"  v-if="SedimentProfit && SedimentProfit.balance ">
                    <img src="@/assets/walletBg.png" alt="" class="walletBg">
                    <div class="wallet-content">
                        <div class="left">
                            <img src="@/assets/walletIcon.png" alt="">
                        </div>
                        <div class="center">
                            <div class="t">
                                {{ SedimentProfit.accountName  }}
                            </div>
                            <div class="b">
                                {{ SedimentProfit.balance }}
                            </div>
                        </div>
                        <div class="right" @click="navTo(`/cashInfo?businessCode=${SedimentProfit.businessCode}`)">
                            查看
                        </div>
                    </div>
                </div>
                <div class="wallet">
                    <img src="@/assets/walletBg1.png" alt="" class="walletBg">
                    <div class="wallet-content">
                        <div class="left">
                            <img src="@/assets/walletIcon.png" alt="">
                        </div>
                        <div class="center">
                            <div class="t">
                                账户余额（元）
                            </div>
                            <div class="b">
                                {{ priceAll.toFixed(2) }}
                            </div>
                        </div>
                        <div class="right" @click="navTo('/walletList')">
                            查看
                        </div>
                    </div>
                </div>

            </div>
        </div>

      <div class="nav_wrapper">
            <div class="nav_list">
                <div class="title">
                    我的服务
                </div>
                <div class="list">
                    <div class="item" @click="navTo('/myInfo')">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right" >
                            <div class="l">
                                我的信息
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right">
                            <div class="l">
                                联系我们
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item" @click="navTo('/mySettlement')">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right">
                            <div class="l">
                                结算信息
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item" @click="navTo('/problem',1)">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right">
                            <div class="l">
                                常见问题
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item" @click="navTo('/editionMessage',1)">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right">
                            <div class="l">
                                版本号
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item" @click="navTo('/setUp',1)">
                        <!-- <img src="@/assets/personal.png" alt="" class="left"> -->
                        <div class="right"  style="border:none">
                            <div class="l">
                                设置
                            </div>
                            <div class="r">
                                <img src="@/assets/chevron-down@2x.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="mine">
import { showConfirmDialog } from "vant"

const router = useRouter()

import { accountBalAll, accountSedimentProfit } from "../../api"
import store from "../../store"
const agentName = ref('')
const agentNo = ref('')
const priceAll = ref(0)
const SedimentProfit = ref({  })
const getAccountBalAll = () =>{
    accountBalAll().then(res=>{
        priceAll.value = Number(res.object.balance)
    })
}
const getAccountSedimentProfit = () =>{
    accountSedimentProfit().then(res=>{
        SedimentProfit.value = res.object||{}
    })
}
const navTo = (path,num) => {
    if (store.state.user.userInfo.agentBean.status === "INIT" && num !== 1) {
        showConfirmDialog({
            title: "未认证",
            message:
                "用户信息未完善，为了你的账户和资金安全请进行实名认证"
        })
            .then(() => {
                router.push({
                    path: "/addService?agentNo=" + store.state.user.userInfo.agentBean.agentNo
                })
            })
            .catch(() => {
                // on cancel
            })
        return
    }
    router.push({
        path
    })
}
if(store.state.user.userInfo.agentBean.id){
    agentName.value = store.state.user.userInfo.agentBean.agentName || '未认证'
    agentNo.value = store.state.user.userInfo.agentBean.agentNo || '未认证'
}
getAccountBalAll()
getAccountSedimentProfit()
</script>

<style scoped lang="scss">
.app-container {
    .header {
        font-size: 0;
        position: relative;

        .bg {
            width: 100%;
        }

        .header-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .myInfo {
                display: flex;
                align-items: center;
                padding: 10px 30px;
                .left {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 40px;
                    }
                }

                .right {
                    padding: 0 10px;

                    .name {
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                        opacity: 1;
                    }

                    .agentNo {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-top: 5px;
                        opacity: 1;
                    }
                }
            }
        }

    }
.nav_wrapper{
    padding: 10px;
}
    .nav_list {
        background: #FFFFFF;
        opacity: 1;
        border-radius: 10px;
        padding: 10px;
        .title {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            opacity: 1;
            padding-bottom: 10px;
            border-bottom: 1px solid #F5F5F5;
        }
        .list{
            padding: 0 10px;
            .item{
                display: flex;
                align-items: center;
                .left{
                    width: 20px;
                    height: 20px;
                    flex-shrink: 0;
                }
                .right{
                    flex: 1;
                    padding: 10px 0;
                    display: flex;
                    border-bottom: 1px solid #F5F5F5;
                    .l{
                        flex: 1;
                        display: flex;
                        align-items: center;
                        padding-left: 10px;
                    }
                    .r{
                        img{
                            width: 30px;
                        }
                    }
                }
            }
        }
    }

    .wallet {
        position: relative;
        padding: 0 10px;

        .walletBg {
            width: 100%;
        }

        .wallet-content {
            position: absolute;
            padding: 10px 20px;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            .left {
                img {
                    width: 28px;
                }
            }

            .center {
                flex: 1;
                padding: 0 10px;

                .t {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    opacity: 1;
                }

                .b {
                    font-size: 18px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin-top: 10px;
                    opacity: 1;
                }
            }

            .right {
                width: 70px;
                height: 30px;
                background: #0776E5;
                opacity: 1;
                border-radius: 15px;
                font-size: 14px;
                font-weight: 400;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
            }
        }
    }
}
</style>

